<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.util.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优家网</title>
    <link rel="stylesheet" href="../css/login.css">
</head>
<style type="text/css">
    * {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;}
    ul,li {list-style: none;}
    a {text-decoration: none;color: black;}
    .box{width: 580px;height: 475px;margin: 20px auto;overflow: hidden;position: relative;}
    .box-1 ul{}
    .box-1 ul li{width: 580px;height: 475px;position: relative;overflow: hidden;}
    .box-1 ul li img{display:block;width: 580px; height: 475px;}
    .box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
        padding-right:360px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
        white-space: nowrap;font-weight: normal;color: ghostwhite}
    .box-2{position: absolute;right: 220px;bottom: 30px;}
    .box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
        background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
    .box-2 ul .on{background: rgba(255,255,255,0.6);}
    .box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
        top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
        text-align: center;cursor: pointer;}
    .box-3 .prev{left: 10px;}
    .box-3 .next{right: 10px;}
    .box-3 span::selection{background: transparent;}
    .box-3 span:hover{background: rgba(125,125,120,.8);}
</style>
<script type="text/javascript">
    window.onload = function(){
        function $(param){
            if(arguments[1] == true){
                return document.querySelectorAll(param);
            }else{
                return document.querySelector(param);
            }
        }
        var $box = $(".box");
        var $box1 = $(".box-1 ul li",true);
        var $box2 = $(".box-2 ul");
        var $box3 = $(".box-3");
        var $length = $box1.length;

        var str = "";
        for(var i =0;i<$length;i++){
            if(i==0){
                str +="<li class='on'>"+(i+1)+"</li>";
            }else{
                str += "<li>"+(i+1)+"</li>";
            }
        }
        $box2.innerHTML = str;

        var current = 0;

        var timer;
        timer = setInterval(go,1000);
        function go(){
            for(var j =0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if($length == current){
                current = 0;
            }
            $box1[current].style.display = "block";
            $box2.children[current].className = "on";
            current++;
        }

        for(var k=0;k<$length;k++){
            $box1[k].onmouseover = function(){
                clearInterval(timer);
            }
            $box1[k].onmouseout = function(){
                timer = setInterval(go,1000);
            }
        }
        for(var p=0;p<$box3.children.length;p++){
            $box3.children[p].onmouseover = function(){
                clearInterval(timer);
            };
            $box3.children[p].onmouseout = function(){
                timer = setInterval(go,1000);
            }
        }

        for(var u =0;u<$length;u++){
            $box2.children[u].index  = u;
            $box2.children[u].onmouseover = function(){
                clearInterval(timer);
                for(var j=0;j<$length;j++){
                    $box1[j].style.display = "none";
                    $box2.children[j].className = "";
                }
                this.className = "on";
                $box1[this.index].style.display = "block";
                current = this.index +1;
            }
            $box2.children[u].onmouseout = function(){
                timer = setInterval(go,1000);
            }
        }

        $box3.children[0].onclick = function(){
            back();
        }
        $box3.children[1].onclick = function(){
            go();
        }
        function back(){
            for(var j =0;j<$length;j++){
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if(current == 0){
                current = $length;
            }
            $box1[current-1].style.display = "block";
            $box2.children[current-1].className = "on";
            current--;
        }
    }
</script>
<body>
<div id="header">
    <div class="wrap">
        <a href="main.jsp"><img src="../images/youjiaw.png" class="qj"></a>
        <a class="login">欢迎登陆</a>
    </div>
</div>
<div class="login-wrap">
    <div class="wrap">
        <div class="J_slide_wrap">
            <div class="box">
                <div class="box-1">
                    <ul>
                        <li>
                            <img src="../images/1.jpg" alt="这里是第一场图片"></img>
                        </li>
                        <li>
                            <img src="../images/2.jpg" alt="这里是第二张图片"></img>
                        </li>
                        <li>
                            <img src="../images/3.jpg" alt="这里是第三张图片"></img>
                        </li>
                        <li>
                            <img src="../images/4.jpg" alt="这里是第一场图片"></img>
                        </li>
                        <li>
                            <img src="../images/5.jpg" alt="这里是第一场图片"></img>
                        </li>
                    </ul>
                </div>
                <div class="box-2">
                    <ul>

                    </ul>
                </div>
                <div class="box-3">
                    <span class="prev"> < </span>
                    <span class="next"> > </span>
                </div>
            </div>
        </div>
        <div class="login-wrap1">
            <div><a class="aa">账号登陆</a></div>
            <p id="errorMsg" style="color: #ff4819;">&nbsp;</p>
            <script>
                function login() {
                    //1.获取数据信息
                    //1.1 获取username的input
                    var username=document.getElementById("user");
                    var password=document.getElementById("password");
                    //1.2获取input的值value
                    username=username.value;
                    password=password.value;

                    // ''
                    var errorMsg=document.getElementById("errorMsg");
                    if(username!=''&&password!=''){
                        errorMsg.innerText='可以登录';
                        return true;
                    }else{
                        errorMsg.innerText='不可以登录';
                        return  false;
                    }
                }

                function checkNumber() {
                    var number=document.getElementById("number").value;
                    //var reg=/^[0-9]*$/;
                    alert(reg.test(number));
                }

            </script>
            <div class="">
                <form action="#" method="post" onsubmit="return login()">
                    <dl class="clearfix">
                        <dt>账户名:</dt>
                        <dd><input id="user" type="text" name="username" placeholder="用户名/手机号" class="input-text"></dd>
                    </dl>
                    <dl>
                        <dt>密码:</dt>
                        <dd><input id="password" type="password" name="password" placeholder="请输入密码"></dd>
                    </dl>
                    <div>
                        <input type="submit" value="登  陆" class="btn-settlement">
                    </div>
                    <div class="wj">
                        <a class="registerl" href="regist.jsp">新用户注册</a>
                        <a class="registerr" href="#">忘记密码</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p>
        优家网 版权所有Copyright © 2005-2018 www.youjia.com All rights reserved
    </p>
    <p>
        沪ICP备13002314号 沪B2-20090108 组织机构代码证：66439109—1
    </p>
    <p>
        中国互联网协会信用评价中心网信认证 网信编码:1664391091
    </p>
</div>
</body>
</html>